<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>扫码GO 宽带自助受理系统</title>
	<script src="js/mui.min.js"></script>
	<link href="css/mui.min.css" rel="stylesheet" th:href="@{/css/mui.min.css}"/>
	<link rel="stylesheet" href="css/index.css"/>
	<script type='text/javascript' src='js/index.js' charset='utf-8'></script>
	<script type='text/javascript' src="js/check.js"></script>
	<script type='text/javascript' src="js/checkQuery.js"></script>
	<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=cTfG4qsdLxoUcIQIBBE2hgUeyzT4UGTL"></script>
	<script type="text/javascript" charset="utf-8">
        mui.init();
	</script>
</head>
<body>		<div class="mui-card">
	<div class="mui-card-header mui-card-media">
		<img src="./images/unicom_logo.jpg" />
		<div class="mui-media-body">
			中国联通黑龙江省分公司
			<p>扫码GO 宽带自助受理系统</p>
		</div>
		<!--<img class="mui-pull-left" src="../images/logo.png" width="34px" height="34px" />
        <h2>小M</h2>
        <p>发表于 2016-06-30 15:30</p>-->
	</div>
	<div class="mui-card-content" >
		<div align="center" style="padding: 10px;">
			<div id="allmap"style="height: 300px"></div>
		</div>
	</div>
	<div class="mui-card-content">
		<div class="mui-card-content-inner">
			<p>楼宇地址资源预判：</p>
			<p style="color: #333;">小区名称：[[${addr8List.addr8Name}]]</p>
			<p style="color: #333;">楼宇名称：[[${addr8List.addr6Name}]]</p>
			<p style="color: #333;">FTTH设备数量：[[${addr8List.ftthEquipNum}]]</p>
			<p style="color: #333;">空闲端口数：[[${addr8List.ftthUsed}]]</p>
		</div>
	</div>
	<div >
		<div class="mui-content" style="padding: 4px;">
			<div class="mui-card">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">该位置资源充足，点击申请宽带自助装机</a>
						<div class="mui-collapse-content">
							<form action="/inputOrders" method="POST" enctype="multipart/form-data"  name="f1">
								<input type="hidden" th:value="${addr8List.addr8Id}" name="addr8_id"/>
								<div class="content">
									<div class="label">身份证</div>
									<div class="img-area">
										<div class="container">
											<input type="file" id='id-face' name='resident_img_face'  accept="image/*" />
											<div id='face-empty-result'>
												<img style='width:4rem' src="images/timg.png" alt="">
												<p>身份证正面照</p>
											</div>
											<img style='width: 100%' id='face-result'/>
										</div>
										<div class="container" style='margin-top:0.5rem;'>
											<input type="file" id='id-back' name='resident_img_back' accept="image/*" />
											<div id='back-empty-result'>
												<img style='width:4rem' src="images/timg.png" alt="">
												<p>身份证反面照</p>
											</div>
											<img style='width: 100%' id='back-result'/>
										</div>
									</div>
								</div>
								<div class="mui-input-row">
									<label>姓名</label>
									<input th:name="custname" type="text" class="mui-input-clear" placeholder="请输入姓名">
								</div>
								<div class="mui-input-row">
									<label>身份证号码</label>
									<input name="resident_id" type="text" class="input1"  placeholder="身份证号码" onkeyup="if(event.keyCode==32) {alert('请不要输入空格');this.value='';}">
								</div>
								<div class="mui-input-row">
									<label>产品</label>
									<select th:name="product_id">
										<option  th:each="allProduct:${allProductList}" th:value="${allProduct.productId}" th:text="${allProduct.productName }"></option>
									</select>
								</div>
								<div class="mui-input-row">
									<label>联系人</label>
									<input th:name="contacts_name" type="text" class="mui-input-clear" placeholder="请输入联系人" >
								</div>
								<div class="mui-input-row">
									<label>联系电话</label>
									<input th:name="contacts_phone" type="text" class="mui-input-clear" placeholder="请输入联系电话" >
								</div>
								<div class="mui-button-row">
									<input name="Submit22" type="button" class="mui-btn mui-btn-primary" value="确定" onClick="check(this.f1) ">&nbsp;&nbsp;
									<input class="mui-btn mui-btn-primary" type="reset" value="取消"></input>
								</div>
							</form>
						</div>
					</li>

				</ul>
			</div>
		</div>
	</div>
	<div class="mui-content" style="padding: 4px;">
		<div class="mui-card">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">订单查询</a>
					<div class="mui-collapse-content">
						<form action="/queryOrders" method="POST"  name="f2">
							<input type="hidden" th:value="${addr8List.addr8Id}" name="addr8_id"/>
							<div class="mui-input-row">
								<label>身份证号码</label>
								<input name="resident_id" type="text" class="input1"  placeholder="身份证号码" onkeyup="if(event.keyCode==32) {alert('请不要输入空格');this.value='';}">
							</div>
							<div class="mui-button-row">
								<input name="Submit22" type="button" class="mui-btn mui-btn-primary" value="确定" onClick="checkquery(this.f2) ">&nbsp;&nbsp;
								<input class="mui-btn mui-btn-primary" type="reset" value="取消"></input>
							</div>
						</form>
					</div>
				</li>

			</ul>
		</div>
	</div>
</div>

</div>





</div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point([[${addr8List.coordinateX}]],[[${addr8List.coordinateY}]]);
    var marker = new BMap.Marker(point);  // 创建标注
    map.addOverlay(marker);              // 将标注添加到地图中
    map.centerAndZoom(point, 17);
    var opts = {
        width : 400,     // 信息窗口宽度
        height: 10,     // 信息窗口高度
        title : "您的位置:" , // 信息窗口标题
        enableMessage:true,//设置允许信息窗发送短息
        message:""
    }
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));
    var infoWindow = new BMap.InfoWindow("[[${addr8List.addr6Name}]]", opts);  // 创建信息窗口对象
    map.openInfoWindow(infoWindow,point);
    marker.addEventListener("click", function(){
        map.openInfoWindow(infoWindow,point); //开启信息窗口
    });
</script>
